<template>
  <div class="all-goods">
    <div class="banxin">
      <!-- <div class="sye">首页 / 全部礼品</div> -->
      <Bread :arr="links" class="sye"></Bread>
      <Banner :src="Src2"></Banner>
      <div class="top flex">
        <div class="jifen">积分:</div>
        <ul class="flex">
          <li v-for="item in prece" :key="item.id">
            <span
              @click="getJfDate(item)"
              :class="{ active: priceId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>

      <div class="botton flex">
        <div class="jifen">分类:</div>
        <ul class="flex">
          <li v-for="item in fen" :key="item.id">
            <span
              @click="getFenDate(item)"
              :class="{ active: cateId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>

      <!-- 商品 -->
      <GoodList :arr="list"></GoodList>
    </div>
  </div>
</template>
 
<script>
import Src2 from "../assets/images/home/ad.png";
import Banner from "../components/home/Banner.vue";
import GoodList from "../components/home/GoogList.vue";
import { getMorApi } from "../http/api";
import Bread from "../components/common/Bread.vue";
import { toast } from "../utils/toast";
export default {
  data() {
    return {
      links: [
        { path: "/home", text: "首页" },
        { path: "", text: "全部商品", isLast: true },
      ],
      Src2,
      priceId: 1,
      cateId: 1,
      //把最大和最小和当前分类也在data里存一份
      currentMin: 0,
      currentMax: 0,
      currentCate: 0,
      //商品的数据,
      list: [],
      prece: [
        { id: 1, text: "全部", min: 0, max: 0 },
        { id: 2, text: "我能兑换的", min: 0, max: 0 },
        { id: 3, text: "0~500分", min: 0, max: 500 },
        { id: 4, text: "500~1000分", min: 500, max: 1000 },
        { id: 5, text: "1000~1500分", min: 1000, max: 1500 },
        { id: 6, text: "1500~2500分", min: 1500, max: 2500 },
      ],

      //分类
      fen: [
        { id: 1, text: "全部", type: 0 },
        { id: 2, text: "实物商品", type: 1 },
        { id: 3, text: "虚拟商品", type: 2 },
      ],
    };
  },
  components: {
    Banner,
    GoodList,
    Bread,
  },
  created() {
    this.getGoods();
  },
  methods: {
    getFenDate(item) {
      this.cateId = item.id;
      // 修改当前是哪个分类
      this.currentCate = item.type;
      this.getGoods();
    },
    getJfDate(item) {
      if (item.id === 2) {
        if (this.$store.state.userInfo.coin !== undefined) {
          // 如果是已经登录了，把  priceGroup 里面的 id为2的那个 max变成我的鸡腿
          this.priceGroup[1].max = this.$store.state.userInfo.coin;
          console.log(this.$store.state.userInfo.coin);
        } else {
          // 没有登录
          toast("请先登录", "warnning");
          this.$store.commit("modifyShowLogin", true);
          return;
        }
      }
      this.priceId = item.id;
      this.currentMin = item.min;
      this.currentMax = item.max;
      this.getGoods();
    },
    async getGoods() {
      const params = {
        did: this.$route.query.did || 0,
        type: this.currentCate,
        min: this.currentMin,
        max: this.currentMax,
        keyword: this.$route.query.keyworld || "",
      };
      const { data } = await getMorApi(params);
      this.list = data.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.all-goods {
  background: #f5f5f5;
  overflow: hidden;
  .banxin {
    font-size: 16px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #666666;
    ul {
      li {
        span {
          cursor: pointer;
          padding-left: 20px;
          &.active {
            color: #00329b;
          }
        }
      }
    }
    .sye {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .jifen {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #333333;
    }
  }
  .top {
    margin-top: 50px;
  }
  .botton {
    margin: 50px 0;
  }
}
</style>
